<template>
	<ElFormItem :label="props.label">
		<ElRadioGroup v-model="input_model" @change="onchange">
			<ElRadio :value="true" :label="options_isTrue"></ElRadio>
			<ElRadio :value="false" :label="options_isFalse"></ElRadio>
		</ElRadioGroup>
	</ElFormItem>
</template>

<script lang="ts" setup>
	const props=defineProps({
	  pidentifier:String,
	  identifier:String,
	  label:String,
	  required:Boolean,
	  value:Boolean,
	  options:Object,
	})
	const options_isTrue=ref<string>("是");
	const options_isFalse=ref<string>("否");
	const input_model=ref<boolean>(false);
	watch(props,() => {
			input_model.value=props.value
			options_isTrue.value=props.options?.isTrue
			options_isFalse.value=props.options?.isFalse
		},
	    { immediate: true, deep: true },
	)
	
	const error=ref(false);
	const error_message=ref();
	const emits = defineEmits(['onchange'])
	
	const onchange=()=>{
		validate();
		emits('onchange',{
			pidentifier:props.pidentifier,
			identifier:props.identifier,
			value:input_model.value
		})
	}
	
	const validate=()=>{
		if(props.required && input_model.value==true){
			error.value=true
			error_message.value=props.label+'必填.'
			return;
		}
		error.value=false
		error_message.value=''
	}
	onMounted(() => {
		
	});
</script>


<style scoped>
	:deep(.el-input) {
	    --el-input-text-color: #ccc;
	    --el-input-border: #105ae4;
	    --el-input-hover-border: #3fa3ff!important;
	    --el-input-focus-border: #3fa3ff!important;
	    --el-input-transparent-border: 0 0 0 1px transparent inset;
	    --el-input-border-color: transparent;
	    --el-input-border-radius: 5px;
	    --el-input-bg-color: #1b1b1b;
	    --el-input-icon-color: var(--el-text-color-placeholder);
	    --el-input-placeholder-color: var(--el-text-color-placeholder);
	    --el-input-hover-border-color: transparent;
	    --el-input-clear-hover-color: var(--el-text-color-secondary);
	    --el-input-focus-border-color: transparent;
	}
	:deep(.el-input-number .el-input__inner){
		text-align: left;
	}
	.form-row{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		margin-bottom: 3px;
		>span{
			width: 55px;
			font-size: 12px;
			color: rgb(158, 158, 158);
			
		}
		>div{
			flex: 1;
		}
	}
	:deep(.el-input__wrapper){
		border-radius:0px;
	}
</style>